<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<style>
  div{
      width: 200px;
      height: 200px;
      background-color: orange;
  }
</style>

<body>
    <script src="js/jquery-3.4.1.min.js"></script>

    <button id="btn1">显示</button> 
    <button id="btn2">隐藏</button> 
    <button id="btn3">切换</button> 
    <button id="btn4">透明度</button>
    <div></div>

    <script>
        /* 1.改变元素的宽和高（带动画效果）
                show( speed )：显示
                hide( speed )：隐藏
                toggle( speed )等价于show+hide : 显示的隐藏，隐藏的显示
                可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒 */
        $("#btn2").click(function(){
            //fast：快递的，slow: 缓慢的，自定义：毫秒
            $("div").hide(2000);
        });

        $("#btn1").click(function(){
            //fast：快递的，slow: 缓慢的，自定义：毫秒
            $("div").show('slow');
        });

        $("#btn3").click(function(){
            $("div").toggle(1000);
        });

        /* 2.改变元素的高（拉伸效果）
                    slideDown( speed ) ：显示
                    slideUp( speed )：隐藏
                    slideToggle( speed )等价于slideDown+slideUp
                    可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒 */

        $("#btn2").click(function(){
            //fast：快递的，slow: 缓慢的，自定义：毫秒
            $("div").slideUp(1000); //向上收缩
        });

        $("#btn1").click(function(){
            //fast：快递的，slow: 缓慢的，自定义：毫秒
            $("div").slideDown(1000); //向下伸展
        });

        $("#btn3").click(function(){
            $("div").slideToggle(1000); //切换
        });

        /* 3.不改变元素的大小（淡入淡出效果）
                    fadeIn( speed ) 显示
                    fadeOut( speed ) 隐藏
                    fadeToggle( speed ) 等价于fadeIn+fadeOut动画
                    fadeTo( speed , 透明度 ) 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）
                    可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒 */

        $("#btn2").click(function(){
            //fast：快递的，slow: 缓慢的，自定义：毫秒
            $("div").fadeOut(1000); //隐藏：淡出我的视线
        });

        $("#btn1").click(function(){
            //fast：快递的，slow: 缓慢的，自定义：毫秒
            $("div").fadeIn(1000); //显示：映入眼帘
        });

        $("#btn3").click(function(){
            $("div").fadeToggle(1000); //切换
        });

        $("#btn4").click(function(){
            $("div").fadeTo(1000,0.5); //1秒内变成50%的透明度
        });

    </script>
</body>
</html>